<template>
  <div class="page-content">
    <nav-bar title="掌上有信-写信" leftIcon=""></nav-bar>
    <div class="pages-content">
      <tm-sheet :shadow="24" :padding="[12,24]" :margin="[24,24]">
        <tm-form ref="formData">
          <tm-pickers :default-value.sync="reqData.zxlxArr" rang-key="title" :list="chelianglis">
            <tm-input name="chexing"  required title="掌信类型" placeholder="请选择掌信类型" disabled :value="obTstr2(reqData.zxlxArr)" right-icon="icon-angle-right"></tm-input>
          </tm-pickers>
          <tm-input name="title" required title="主题" v-model="reqData.zt"></tm-input>
          <tm-input :vertical="true" required :height="250" input-type="textarea" bg-color="grey-lighten-5" :maxlength="200"  title="详细内容" placeholder="请输入,不超过200字符"  v-model="reqData.xxnr" ></tm-input>
          <view class="py-12 px-24 mx-12 round-3 border-b-1 grey text" :class="tmVuetify.black ? 'bk' : ''">
            <text class="text-size-n text-weight-b ">添加附件</text><text class="text-grey text-size-xs px-10">(最多可以上传8张)</text>
          </view>
          <view class="py-32 mx-12">
            <tm-upload
            color="grey"
            url="https://mockapi.eolinker.com/Uj8WNQX0d65502098df8ecc1f06348d7aac9364b4d08923/my/upload"
            name="uploadImg" :filelist.sync="reqData.uploadImg2" autoUpload :max="8" :grid="4"></tm-upload>
          </view>
        </tm-form>
      </tm-sheet>
    </div>
    <!-- <div class="bom-div">
      <tm-button theme="bg-gradient-red-accent" size="g">发送</tm-button>
    </div> -->
    <div class="bom-btn">
      <div class="cancel bom-btn-item" @click="toBack">取消</div>
      <div class="sure bom-btn-item" @click="reply">发送</div>
    </div>
    <!-- 提示框 -->
    <uni-popup
      ref="tipRef"
      type="dialog"
    >
      <uni-popup-dialog
        title="提示"
        content="确定要发送吗"
        @confirm="sendSure"
      >
      </uni-popup-dialog>
    </uni-popup>
  </div>
</template>

<script>
import $global from '@/module/tipsGroup'
import navBar from '@/components/nav-bar/index.vue'
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmUpload from '@/tm-vuetify/components/tm-upload/tm-upload.vue';

export default {
  components: {
    navBar,
    tmForm,
    tmSheet,
    tmPickers,
    tmInput,
    tmUpload,
    tmButton
  },
  // mixins: [navbar],
  data () {
    return {
      deploy: [],
      reqData: {
        zxlxArr: [],
        zt: '',
        xxnr: ''
      },
      chelianglis:[
        { title: "法律咨询", id: '1' },
        { title: "心里咨询", id: '2' },
        { title: "教师咨询", id: '3' }
      ]
    }
  },
  async onLoad (options) {
    
  },
  computed: {
    userProfile () {
      return this.$store.state.userProfile || {
        userInfo: {}
      }
    }
  },
  methods: {
    async reply () {
      const { zxlxArr = [], zt = '', xxnr = '' } = this.reqData
      if (zxlxArr.length === 0) {
        $global.$toast('fail', '请输入掌信类型')
        return
      }
      if (!zt) {
        $global.$toast('fail', '请输入主题')
        return
      }
      if (!xxnr) {
        $global.$toast('fail', '请输入主题内容')
        return
      }
      this.$refs.tipRef.open()
    },
    tipClose () {
      this.$refs.tipRef.close()
    },
    async sendSure () {
      const sendData = {
        ...this.reqData,
        zxlx: this.reqData.zxlxArr[0].id
      }
      await this.$store.dispatch('fjOrHj', sendData)
      $global.$toast('success', '发送成功')
      this.toBack()
    },
    toBack () {
      uni.navigateBack({
        delta: 1,//返回层数，2则上上页
      })
    },
    navChange (obj) {
      uni.navigateTo({
        url: obj.item.paths
      })
    },
    obTstr2(o){
      if(Array.isArray(o)){
        if(o.length.length===0) return "";
        return o[0]?.title??""
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.pages-content {
  overflow: auto;
}
</style>
